<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="node">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>

    <script>
        // appendChild()，在最后一子节点后面加一个节点
        // 返回新添加的节点
        // 把已有的节点添加到appendChild()里，会把其位置改变到最后
        const topNode = document.getElementById("node")
        const childNode = document.createElement('div')
        const returnNode = topNode.appendChild(childNode)
        returnNode.innerText = 'appendChildAdd' // 给子节点添加文本

        // insertBefore(新节点, 原有的某个节点)，如果第二个参数为空则插入到最后
        // 与appendChild功能一样，只不过是可以指定位置插入
        const childNode1 = document.createElement('div')
        const returnNode1 = topNode.insertBefore(childNode1, topNode.lastChild) // 插入到最后一个节点的前面
        returnNode1.innerText = 'insertBefore'

        // replaceChild(要插入的节点, 要替换的节点)
        // 函数返回被替换的节点
        const childNode2 = document.createElement('div')
        childNode2.innerText = 'replaceChild'
        topNode.replaceChild(childNode2, topNode.lastChild) // 替换最后一个节点

        // removeChild(要删除的节点)
        topNode.removeChild(topNode.lastChild) // 删除最后一个节点

    </script>
</body>
</html>